<template>
  <div ref="mapBox" class="mapBox">
  </div>
</template>

<script>
import * as echarts from 'echarts';
import 'echarts-gl'

export default {
  name: "map3D",
  data() {
    return {
      mapData: {},
      myChart:null,
    }
  },
  mounted() {
    this.$nextTick(()=>{
      this.initMap();
    })
    window.addEventListener('resize',this.resize)

  },
  created() {

  },
  beforeDestroy() {
    if(!this.myChart){
      return
    }
    this.myChart.dispose();
    this.myChart = null;
    window.removeEventListener('resize',this.resize)
  },
  methods: {
    initMap(mapName='ganqinning',title='甘青宁地图',dataList=[]) {
      let dataObj ;
      this.myChart = echarts.init(this.$refs.mapBox);
      this.mapData = require('./'+mapName+'.json')
      echarts.registerMap(mapName, this.mapData);
      let bg = require('@/assets/images/map/bg.png');
      let option = {
        title: { // 标题
          top: '10px',
          text: title,
          subtext: '',
          x: 'center',
          textStyle: {
            color: '#FFF'
          }
        },
        tooltip: {
          show:dataList.length > 0?true:false,
          trigger: "item",
          triggerOn: "mousemove|click",
          alwaysShowContent: true,
          showDelay: 300, //浮层显示的延迟
          transitionDuration: 0.6, // 提示框浮层的移动动画过渡时间
          hideDelay:300, // 浮层隐藏的延迟
          enterable: true,
          renderMode:'html',  // HTML？
          className: 'iconMap',
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0);',
          formatter: function(params) {
            if (params.data) {
              let html = `<div style="width:300px;height:185px;background: url(${bg}) no-repeat;background-size:100%;padding:20px 22px;position: relative;">
                                        <div id="tooltipGB" style="position: absolute;width:30px;height:30px;right:15px;top:15px;"></div>
                                        <div style="font-size: 18px;">${params.data.name}</div>
                                        <div style="display:flex;margin-top:20px;height:100px;">
                                            <div style="width:80px;height:80px;overflow: hidden;">
                                                <img width="100%" height="auto" src="${params.data.img}" alt="">
                                            </div>
                                            <div style="padding-left:10px;width:170px;white-space:normal;font-size: 14px;font-weight: 400;">
                                                ${params.data.content}
                                            </div>
                                        </div>
                                    </div>`
              return html;
            } else {
              return `<div style="background-color: rgba(4,24,51,0.5);padding:5px 10px;">${params.name}</div>`;
            }
          },
          backgroundColor: "none",
          borderColor: 'rgba(99, 173, 222,0)',
          borderWidth: 0,
          padding: [0, 0],
          textStyle: {
            color: "#fff",
            fontWeight: "bolder",
          },
        },
        geo3D: {
          roam: false,
          type: 'map3D', // 系列类型
          name: 'map3D', // 系列名称
          map: mapName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。)
          // regionHeight: '10', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
          regionHeight:8, // 高度
          label: { // 标签的相关设置
            show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
            textStyle: { // 标签的字体样式
              color: '#FFF', // 地图初始化区域字体颜色
              fontSize: 16, // 字体大小
              opacity: 1, // 字体透明度
              // backgroundColor: 'rgba(0,23,11,0)' // 字体背景色
            },
          },
          // width: '800px',
          boxWidth:220,
          itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
            color: 'rgba(5, 131, 208,0.5)', // 地图板块的颜色
            opacity: 0, // 图形的不透明度 [ default: 1 ]
            borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
            borderColor: '#FFF' // 图形描边的颜色。[ default: #333 ]
          },

          emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
            label: { // label高亮时的配置
              show: true,
              disabled:false,
              textStyle: {
                color: '#fff', // 高亮时标签颜色变为 白色
                fontSize: 20, // 高亮时标签字体 变大
              },
              formatter:function(params) { // 鼠标放到哪一块，那么就显示哪一块的名称
                dataObj = params
                  return params.name ;
                }
            },
            itemStyle: { // itemStyle高亮时的配置
              color: 'rgba(9, 107, 209,0.6)' ,// 高亮时地图板块颜色改变
              areaColor: 'rgba(9, 107, 209,0.6)', // 高亮时地图板块颜色改变
            }
          },

          groundPlane: { // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
            show: false, // 是否显示地面。[ default: false ]
            color: '#aaa' // 地面颜色。[ default: '#aaa' ]
          },

//shading: 'lambert', // 三维地理坐标系组件中三维图形的着色效果，echarts-gl 中支持下面三种着色方式:
// 'color' 只显示颜色，不受光照等其它因素的影响。
// 'lambert' 通过经典的 lambert 着色表现光照带来的明暗。
// 'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了基于物理的渲染（PBR） 来表现真实感材质。
// realisticMaterial: {} // 真实感材质相关的配置项，在 shading 为'realistic'时有效。
// lambertMaterial: {} // lambert 材质相关的配置项，在 shading 为'lambert'时有效。
// colorMaterial: {} // color 材质相关的配置项，在 shading 为'color'时有效。

          light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
            main: { // 场景主光源的设置，在 globe 组件中就是太阳光。
              color: '#fff', //主光源的颜色。[ default: #fff ]
              intensity: 1.2, //主光源的强度。[ default: 1 ]
              shadow: false, //主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
//shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
              alpha: 55, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
              beta: 10 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
            },
            ambient: { // 全局的环境光设置。
              color: '#fff', // 环境光的颜色。[ default: #fff ]
              intensity: 0.5 // 环境光的强度。[ default: 0.2 ]
            }
          },

          viewControl: { // 用于鼠标的旋转，缩放等视角控制。
            projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
            autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
            autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
            autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
            autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
            damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
            rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。 rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
            zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
            panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
            panMouseButton: 'left', // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
            rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)

            distance: 200, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
            minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
            maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。

            alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
            beta: 15, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
            minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
            maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
            minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
            maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]

            center: [0,0,0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。

            animation: true, // 是否开启动画。[ default: true ]
            animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
            animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
          },

          data: [
              { // 可对单个地图区域进行设置
            name: '甘肃省', // 所对应的地图区域的名称
            itemStyle: { // 单个区域的样式设置
              color:'rgb(0, 130, 245,0.6)',
              opacity: 1,
              borderWidth: 0.4,
              borderColor: '#FFF'
            },
          }, {
            name: '青海省',
            itemStyle: {
              color:'rgb(95,86,187,0.6)',
              opacity: 1,
              borderWidth: 0.4,
              borderColor: '#FFF'
            },

          }, {
            name: '宁夏回族自治区',
            itemStyle: {
              color:'rgb(1,135,154,0.6)',
              opacity: 1,
              borderWidth: 0.4,
              borderColor: '#FFF'
            },

          }]
        },
        series: [
          {
            roam: false,
            type: 'map3D', // 系列类型
            name: 'map3D', // 系列名称
            map: mapName, // 地图类型。echarts-gl 中使用的地图类型同 geo 组件相同(ECharts 中提供了两种格式的地图数据，一种是可以直接 script 标签引入的 js 文件，引入后会自动注册地图名字和数据。还有一种是 JSON 文件，需要通过 AJAX 异步加载后手动注册。)
            regionHeight:8, // 高度
            boxWidth:220,
            label: { // 标签的相关设置
              show: true, // (地图上的城市名称)是否显示标签 [ default: false ]
              textStyle: { // 标签的字体样式
                color: '#FFF', // 地图初始化区域字体颜色
                fontSize: 16, // 字体大小
                opacity: 1, // 字体透明度
                // backgroundColor: 'rgba(0,23,11,0)' // 字体背景色
              },
            },

            itemStyle: { // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
              color: 'rgba(5, 131, 208,0.5)', // 地图板块的颜色
              opacity: 1, // 图形的不透明度 [ default: 1 ]
              borderWidth: 2, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域 [ default: 0 ]
              borderColor: '#FFF' // 图形描边的颜色。[ default: #333 ]
            },

            emphasis: { // 鼠标 hover 高亮时图形和标签的样式 (当鼠标放上去时 label和itemStyle 的样式)
              label: { // label高亮时的配置
                show: true,
                textStyle: {
                  color: '#fff', // 高亮时标签颜色变为 白色
                  fontSize: 20, // 高亮时标签字体 变大
                },
              },
              itemStyle: { // itemStyle高亮时的配置
                color: 'rgba(55,98,143,0.6)' ,// 高亮时地图板块颜色改变
                areaColor: 'rgba(9, 107, 209,0.6)', // 高亮时地图板块颜色改变
              }
            },

            groundPlane: { // 地面可以让整个组件有个“摆放”的地方，从而使整个场景看起来更真实，更有模型感。
              show: false, // 是否显示地面。[ default: false ]
              color: '#aaa' // 地面颜色。[ default: '#aaa' ]
            },
            // colorMaterial:{
            //   // 材质纹理
            //   detailTexture:1,
            // },
            // shading: 'realistic', // 三维地理坐标系组件中三维图形的着色效果，echarts-gl 中支持下面三种着色方式:
            // realisticMaterial:{
            //   // detailTexture: 'https://pic.chaopx.com/chao_origin_pic/22/05/19/30a50cd83a13fa622535d5e983f676d0.jpg!/fw/200/quality/100/unsharp/true/compress/true',
            //   // detailTexture:'https://pic.chaopx.com/chao_origin_pic/22/08/17/11fecefcb10344f8b068330e19129daa.jpg!/fw/200/quality/100/unsharp/true/compress/true',
            //   // detailTexture:'https://bpic.588ku.com//back_list_pic/23/06/16/44c49e177d28e049c6965a7cf500f3a1.jpg!/fh/350/unsharp/true',
            //   detailTexture:'https://bpic.588ku.com/back_origin_min_pic/19/10/22/ca524a0a48ac95e65569433c3bef1574.jpg!/fh/360/unsharp/true',
            //   textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
            //   roughness: 1, // 材质粗糙度，0完全光滑，1完全粗糙
            //   metalness: 0, // 0材质是非金属 ，1金属
            //   roughnessAdjust: 0
            // },
// 'color' 只显示颜色，不受光照等其它因素的影响。
// 'lambert' 通过经典的 lambert 着色表现光照带来的明暗。
// 'realistic' 真实感渲染，配合 light.ambientCubemap 和 postEffect 使用可以让展示的画面效果和质感有质的提升。ECharts GL 中使用了基于物理的渲染（PBR） 来表现真实感材质。
// realisticMaterial: {} // 真实感材质相关的配置项，在 shading 为'realistic'时有效。
// lambertMaterial: {} // lambert 材质相关的配置项，在 shading 为'lambert'时有效。
// colorMaterial: {} // color 材质相关的配置项，在 shading 为'color'时有效。

            light: { // 光照相关的设置。在 shading 为 'color' 的时候无效。 光照的设置会影响到组件以及组件所在坐标系上的所有图表。合理的光照设置能够让整个场景的明暗变得更丰富，更有层次。
              main: { // 场景主光源的设置，在 globe 组件中就是太阳光。
                color: '#fff', //主光源的颜色。[ default: #fff ]
                intensity: 1, //主光源的强度。[ default: 1 ]
                shadow: false, //主光源是否投射阴影。默认关闭。 开启阴影可以给场景带来更真实和有层次的光照效果。但是同时也会增加程序的运行开销。
                shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
//shadowQuality: 'high', // 阴影的质量。可选'low', 'medium', 'high', 'ultra' [ default: 'medium' ]
                alpha: 8, // 主光源绕 x 轴，即上下旋转的角度。配合 beta 控制光源的方向。[ default: 40 ]
                beta: 80 // 主光源绕 y 轴，即左右旋转的角度。[ default: 40 ]
              },
              ambient: { // 全局的环境光设置。
                color: '#fff', // 环境光的颜色。[ default: #fff ]
                intensity: 1 // 环境光的强度。[ default: 0.2 ]
              }
            },

            viewControl: { // 用于鼠标的旋转，缩放等视角控制。
              projection: 'perspective', // 投影方式，默认为透视投影'perspective'，也支持设置为正交投影'orthographic'。
              autoRotate: false, // 是否开启视角绕物体的自动旋转查看。[ default: false ]
              autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw' 也就是从上往下看是顺时针方向，也可以取 'ccw'，既从上往下看为逆时针方向。
              autoRotateSpeed: 10, // 物体自传的速度。单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
              autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔。在开启 autoRotate 后有效。[ default: 3 ]
              damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子，在大于等于 1 的时候鼠标在停止操作后，视角仍会因为一定的惯性继续运动（旋转和缩放）。[ default: 0.8 ]
              rotateSensitivity: 1, // 旋转操作的灵敏度，值越大越灵敏。支持使用数组分别设置横向和纵向的旋转灵敏度。默认为1, 设置为0后无法旋转。 rotateSensitivity: [1, 0]——只能横向旋转； rotateSensitivity: [0, 1]——只能纵向旋转。
              zoomSensitivity: 1, // 缩放操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法缩放。
              panSensitivity: 1, // 平移操作的灵敏度，值越大越灵敏。默认为1,设置为0后无法平移。支持使用数组分别设置横向和纵向的平移灵敏度
              panMouseButton: 'left', // 平移操作使用的鼠标按键，支持：'left' 鼠标左键（默认）;'middle' 鼠标中键 ;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)
              rotateMouseButton: 'left', // 旋转操作使用的鼠标按键，支持：'left' 鼠标左键;'middle' 鼠标中键（默认）;'right' 鼠标右键(注意：如果设置为鼠标右键则会阻止默认的右键菜单。)

              distance: 200, // [ default: 100 ] 默认视角距离主体的距离，对于 grid3D 和 geo3D 等其它组件来说是距离中心原点的距离,对于 globe 来说是距离地球表面的距离。在 projection 为'perspective'的时候有效。
              minDistance: 40, // [ default: 40 ] 视角通过鼠标控制能拉近到主体的最小距离。在 projection 为'perspective'的时候有效。
              maxDistance: 400, // [ default: 400 ] 视角通过鼠标控制能拉远到主体的最大距离。在 projection 为'perspective'的时候有效。

              alpha: 40, // 视角绕 x 轴，即上下旋转的角度。配合 beta 可以控制视角的方向。[ default: 40 ]
              beta: 15, // 视角绕 y 轴，即左右旋转的角度。[ default: 0 ]
              minAlpha: -360, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
              maxAlpha: 360, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
              minBeta: -360, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
              maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]

              // center: [0,0,0], // 视角中心点，旋转也会围绕这个中心点旋转，默认为[0,0,0]。

              animation: true, // 是否开启动画。[ default: true ]
              animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
              animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果。[ default: cubicInOut ]
            },

            data: [
                { // 可对单个地图区域进行设置
              name: '甘肃省', // 所对应的地图区域的名称
//regionHeight: '', // 区域的高度，可以设置不同的高度用来表达数据的大小。当 GeoJSON 为建筑的数据时，也可以通过这个值表示简直的高度。
              itemStyle: { // 单个区域的样式设置
                color:'rgb(0, 130, 245,0.6)',
                opacity: 1,
                borderWidth: 0.4,
                borderColor: '#FFF'
              },
            }, {
              name: '青海省',
              itemStyle: {
                color:'rgb(95,86,187,0.6)',
                opacity: 1,
                borderWidth: 0.4,
                borderColor: '#FFF'
              },

            }, {
              name: '宁夏回族自治区',
              itemStyle: {
                color:'rgb(1,135,154,0.6)',
                opacity: 1,
                borderWidth: 0.4,
                borderColor: '#FFF'
              },

            }]
          },
          {

            // 叠加地图上需要显示的数据，插牌
            type: 'scatter3D',
            coordinateSystem: 'geo3D',
            symbol: function(value, params) {
              if (params.data.isActive) {
                return params.data.info.iconActive;
              } else {
                return params.data.info.icon;
              }
            },
            symbolSize: 50,
            label:{
              show:false,
            },
            emphasis: {
              label: {
                show: false,
                color: '#f1a1a1',
                fontSize: 32
              }
            },

            data: dataList,
          }
        ],
      };

      this.myChart.getZr().on('dblclick', (params) =>{
        if(dataObj &&  dataObj.name){
          console.log(dataObj.name)
          let name  = 'ganqinning';
          let title = dataObj.name+'地图';
          let data = [];
          if(dataObj.name ==  '甘肃省'){
            data = [
              {
                name: '项目内容1',
                value: [98.823557, 36.058039, 10],
                img: 'https://wimg.588ku.com/gif620/20/10/12/0e3c9c4977133ff77018846ab055f3ba.gif',
                content: '1.内容详情介绍内容详情介绍内容详情介绍',
                info: {
                  icon:'path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.031-1.952,15.182-0.165,19.498-3.937 c1.15-3.933-1.24-9.846-1.229-9.938c0.008-0.062-1.314-0.004-1.803-0.258c-1.119-0.771-6.531-3.75-0.17-3.33 c0.314-0.045,0.943,0.259,1.439,0.435c-0.289-1.694-0.92-0.144-3.311-1.946c0,0-1.1-0.855-1.764-1.98 c-0.836-1.09-2.01-2.825-2.992-4.031c-1.523-2.476,1.367,0.709,1.816,1.108c1.768,1.704,1.844,3.281,3.232,3.983 c0.195,0.203,1.453,0.164,0.926-0.468c-0.525-0.632-1.367-1.278-1.775-2.341c-0.293-0.703-1.311-2.326-1.566-2.711 c-0.256-0.384-0.959-1.718-1.67-2.351c-1.047-1.187-0.268-0.902,0.521-0.07c0.789,0.834,1.537,1.821,1.672,2.023 c0.135,0.203,1.584,2.521,1.725,2.387c0.102-0.259-0.035-0.428-0.158-0.852c-0.125-0.423-0.912-2.032-0.961-2.083 c-0.357-0.852-0.566-1.908-0.598-3.333c0.4-2.375,0.648-2.486,0.549-0.705c0.014,1.143,0.031,2.215,0.602,3.247 c0.807,1.496,1.764,4.064,1.836,4.474c0.561,3.176,2.904,1.749,2.281-0.126c-0.068-0.446-0.109-2.014-0.287-2.862 c-0.18-0.849-0.219-1.688-0.113-3.056c0.066-1.389,0.232-2.055,0.277-2.299c0.285-1.023,0.4-1.088,0.408,0.135 c-0.059,0.399-0.131,1.687-0.125,2.655c0.064,0.642-0.043,1.768,0.172,2.486c0.654,1.928-0.027,3.496,1,3.514 c1.805-0.424,2.428-1.218,2.428-2.346c-0.086-0.704-0.121-0.843-0.031-1.193c0.221-0.568,0.359-0.67,0.312-0.076 c-0.055,0.287,0.031,0.533,0.082,0.794c0.264,1.197,0.912,0.114,1.283-0.782c0.15-0.238,0.539-2.154,0.545-2.522 c-0.023-0.617,0.285-0.645,0.309,0.01c0.064,0.422-0.248,2.646-0.205,2.334c-0.338,1.24-1.105,3.402-3.379,4.712 c-0.389,0.12-1.186,1.286-3.328,2.178c0,0,1.729,0.321,3.156,0.246c1.102-0.19,3.707-0.027,4.654,0.269 c1.752,0.494,1.531-0.053,4.084,0.164c2.26-0.4,2.154,2.391-1.496,3.68c-2.549,1.405-3.107,1.475-2.293,2.984 c3.484,7.906,2.865,13.183,2.193,16.466c2.41,0.271,5.732-0.62,7.301,0.725c0.506,0.333,0.648,1.866-0.457,2.86 c-4.105,2.745-9.283,7.022-13.904,7.662c-0.977-0.194,0.156-2.025,0.803-2.247l1.898-0.03c0.596-0.101,0.936-0.669,1.152-1.139 c3.16-0.404,5.045-3.775,8.246-4.818c-4.035-0.718-9.588,3.981-12.162,1.051c-5.043,1.423-11.449,1.84-15.895,1.111 c-3.105,2.687-7.934,4.021-12.115,5.866c-3.271,3.511-5.188,8.086-9.967,10.414c-0.986,0.119-0.48-1.974,0.066-2.385l1.795-0.618 C-22.995,25.682-22.849,25.035-22.788,24.521z',
                  iconActive: "path://M4370 2417 c-3 -3 -19 -7 -37 -10 -77 -12 -239 -115 -250 -158 -3 -11 -9 -19 -13 -19 -13 0 -68 -114 -84 -176 -21 -80 -20 -143 3 -229 25 -97 51 -140 137 -229 57 -59 130 -98 224 -120 83 -20 128 -20 209 0 147 36 259 125 327 262 l39 77 -1 130 c0 118 -2 135 -25 180 -49 99 -99 160 -185 224 -14 11 -104 51 -129 58 -29 8 -209 16 -215 10z m165 -348 c83 -50 93 -166 19 -235 -62 -59 -155 -54 -213 11 -115 131 45 316 194 224z",
                },
                isActive: false
              }, {
                name: '项目内容2',
                value: [98.277304, 39.786529, 10],
                img: 'https://wimg.588ku.com/gif620/20/10/12/0e3c9c4977133ff77018846ab055f3ba.gif',
                content: '2.内容详情介绍内容详情介绍内容详情介绍',
                info: {
                  icon:'path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.031-1.952,15.182-0.165,19.498-3.937 c1.15-3.933-1.24-9.846-1.229-9.938c0.008-0.062-1.314-0.004-1.803-0.258c-1.119-0.771-6.531-3.75-0.17-3.33 c0.314-0.045,0.943,0.259,1.439,0.435c-0.289-1.694-0.92-0.144-3.311-1.946c0,0-1.1-0.855-1.764-1.98 c-0.836-1.09-2.01-2.825-2.992-4.031c-1.523-2.476,1.367,0.709,1.816,1.108c1.768,1.704,1.844,3.281,3.232,3.983 c0.195,0.203,1.453,0.164,0.926-0.468c-0.525-0.632-1.367-1.278-1.775-2.341c-0.293-0.703-1.311-2.326-1.566-2.711 c-0.256-0.384-0.959-1.718-1.67-2.351c-1.047-1.187-0.268-0.902,0.521-0.07c0.789,0.834,1.537,1.821,1.672,2.023 c0.135,0.203,1.584,2.521,1.725,2.387c0.102-0.259-0.035-0.428-0.158-0.852c-0.125-0.423-0.912-2.032-0.961-2.083 c-0.357-0.852-0.566-1.908-0.598-3.333c0.4-2.375,0.648-2.486,0.549-0.705c0.014,1.143,0.031,2.215,0.602,3.247 c0.807,1.496,1.764,4.064,1.836,4.474c0.561,3.176,2.904,1.749,2.281-0.126c-0.068-0.446-0.109-2.014-0.287-2.862 c-0.18-0.849-0.219-1.688-0.113-3.056c0.066-1.389,0.232-2.055,0.277-2.299c0.285-1.023,0.4-1.088,0.408,0.135 c-0.059,0.399-0.131,1.687-0.125,2.655c0.064,0.642-0.043,1.768,0.172,2.486c0.654,1.928-0.027,3.496,1,3.514 c1.805-0.424,2.428-1.218,2.428-2.346c-0.086-0.704-0.121-0.843-0.031-1.193c0.221-0.568,0.359-0.67,0.312-0.076 c-0.055,0.287,0.031,0.533,0.082,0.794c0.264,1.197,0.912,0.114,1.283-0.782c0.15-0.238,0.539-2.154,0.545-2.522 c-0.023-0.617,0.285-0.645,0.309,0.01c0.064,0.422-0.248,2.646-0.205,2.334c-0.338,1.24-1.105,3.402-3.379,4.712 c-0.389,0.12-1.186,1.286-3.328,2.178c0,0,1.729,0.321,3.156,0.246c1.102-0.19,3.707-0.027,4.654,0.269 c1.752,0.494,1.531-0.053,4.084,0.164c2.26-0.4,2.154,2.391-1.496,3.68c-2.549,1.405-3.107,1.475-2.293,2.984 c3.484,7.906,2.865,13.183,2.193,16.466c2.41,0.271,5.732-0.62,7.301,0.725c0.506,0.333,0.648,1.866-0.457,2.86 c-4.105,2.745-9.283,7.022-13.904,7.662c-0.977-0.194,0.156-2.025,0.803-2.247l1.898-0.03c0.596-0.101,0.936-0.669,1.152-1.139 c3.16-0.404,5.045-3.775,8.246-4.818c-4.035-0.718-9.588,3.981-12.162,1.051c-5.043,1.423-11.449,1.84-15.895,1.111 c-3.105,2.687-7.934,4.021-12.115,5.866c-3.271,3.511-5.188,8.086-9.967,10.414c-0.986,0.119-0.48-1.974,0.066-2.385l1.795-0.618 C-22.995,25.682-22.849,25.035-22.788,24.521z',
                  iconActive: "path://M4370 2417 c-3 -3 -19 -7 -37 -10 -77 -12 -239 -115 -250 -158 -3 -11 -9 -19 -13 -19 -13 0 -68 -114 -84 -176 -21 -80 -20 -143 3 -229 25 -97 51 -140 137 -229 57 -59 130 -98 224 -120 83 -20 128 -20 209 0 147 36 259 125 327 262 l39 77 -1 130 c0 118 -2 135 -25 180 -49 99 -99 160 -185 224 -14 11 -104 51 -129 58 -29 8 -209 16 -215 10z m165 -348 c83 -50 93 -166 19 -235 -62 -59 -155 -54 -213 11 -115 131 45 316 194 224z",
                },
                isActive: false
              }, {
                name: '项目内容3',
                value: [102.187888, 38.514238, 10],
                img: 'https://wimg.588ku.com/gif620/20/10/12/0e3c9c4977133ff77018846ab055f3ba.gif',
                content: '3.内容详情介绍内容详情介绍内容详情介绍',
                info: {
                  icon:'path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.031-1.952,15.182-0.165,19.498-3.937 c1.15-3.933-1.24-9.846-1.229-9.938c0.008-0.062-1.314-0.004-1.803-0.258c-1.119-0.771-6.531-3.75-0.17-3.33 c0.314-0.045,0.943,0.259,1.439,0.435c-0.289-1.694-0.92-0.144-3.311-1.946c0,0-1.1-0.855-1.764-1.98 c-0.836-1.09-2.01-2.825-2.992-4.031c-1.523-2.476,1.367,0.709,1.816,1.108c1.768,1.704,1.844,3.281,3.232,3.983 c0.195,0.203,1.453,0.164,0.926-0.468c-0.525-0.632-1.367-1.278-1.775-2.341c-0.293-0.703-1.311-2.326-1.566-2.711 c-0.256-0.384-0.959-1.718-1.67-2.351c-1.047-1.187-0.268-0.902,0.521-0.07c0.789,0.834,1.537,1.821,1.672,2.023 c0.135,0.203,1.584,2.521,1.725,2.387c0.102-0.259-0.035-0.428-0.158-0.852c-0.125-0.423-0.912-2.032-0.961-2.083 c-0.357-0.852-0.566-1.908-0.598-3.333c0.4-2.375,0.648-2.486,0.549-0.705c0.014,1.143,0.031,2.215,0.602,3.247 c0.807,1.496,1.764,4.064,1.836,4.474c0.561,3.176,2.904,1.749,2.281-0.126c-0.068-0.446-0.109-2.014-0.287-2.862 c-0.18-0.849-0.219-1.688-0.113-3.056c0.066-1.389,0.232-2.055,0.277-2.299c0.285-1.023,0.4-1.088,0.408,0.135 c-0.059,0.399-0.131,1.687-0.125,2.655c0.064,0.642-0.043,1.768,0.172,2.486c0.654,1.928-0.027,3.496,1,3.514 c1.805-0.424,2.428-1.218,2.428-2.346c-0.086-0.704-0.121-0.843-0.031-1.193c0.221-0.568,0.359-0.67,0.312-0.076 c-0.055,0.287,0.031,0.533,0.082,0.794c0.264,1.197,0.912,0.114,1.283-0.782c0.15-0.238,0.539-2.154,0.545-2.522 c-0.023-0.617,0.285-0.645,0.309,0.01c0.064,0.422-0.248,2.646-0.205,2.334c-0.338,1.24-1.105,3.402-3.379,4.712 c-0.389,0.12-1.186,1.286-3.328,2.178c0,0,1.729,0.321,3.156,0.246c1.102-0.19,3.707-0.027,4.654,0.269 c1.752,0.494,1.531-0.053,4.084,0.164c2.26-0.4,2.154,2.391-1.496,3.68c-2.549,1.405-3.107,1.475-2.293,2.984 c3.484,7.906,2.865,13.183,2.193,16.466c2.41,0.271,5.732-0.62,7.301,0.725c0.506,0.333,0.648,1.866-0.457,2.86 c-4.105,2.745-9.283,7.022-13.904,7.662c-0.977-0.194,0.156-2.025,0.803-2.247l1.898-0.03c0.596-0.101,0.936-0.669,1.152-1.139 c3.16-0.404,5.045-3.775,8.246-4.818c-4.035-0.718-9.588,3.981-12.162,1.051c-5.043,1.423-11.449,1.84-15.895,1.111 c-3.105,2.687-7.934,4.021-12.115,5.866c-3.271,3.511-5.188,8.086-9.967,10.414c-0.986,0.119-0.48-1.974,0.066-2.385l1.795-0.618 C-22.995,25.682-22.849,25.035-22.788,24.521z',
                  iconActive: "path://M4370 2417 c-3 -3 -19 -7 -37 -10 -77 -12 -239 -115 -250 -158 -3 -11 -9 -19 -13 -19 -13 0 -68 -114 -84 -176 -21 -80 -20 -143 3 -229 25 -97 51 -140 137 -229 57 -59 130 -98 224 -120 83 -20 128 -20 209 0 147 36 259 125 327 262 l39 77 -1 130 c0 118 -2 135 -25 180 -49 99 -99 160 -185 224 -14 11 -104 51 -129 58 -29 8 -209 16 -215 10z m165 -348 c83 -50 93 -166 19 -235 -62 -59 -155 -54 -213 11 -115 131 45 316 194 224z",
                },
                isActive: false
              }];
            name  = 'gansu';
          } else if(dataObj.name ==  '青海省'){
            name  = 'qinhai';
          } else if(dataObj.name ==  '宁夏回族自治区'){
            name  = 'ningxia';
          }else{
            title = '甘青宁地图'
          }
          // myChart.clear();
          this.myChart.dispose();
          // myChart.resize();
          this.initMap(name,title,data);
        }


      })
      option && this.myChart.setOption(option);
    },
    resize(){
      this.myChart.resize();
    },
  },
}
</script>

<style scoped>
.mapBox{
  height: 100%;
}
</style>
